<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graph from Table Input</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h2>Graph from Table Input</h2>

    <table id="data-table">
        <thead>
            <tr>
                <th>Category</th>
                <th>Data Value</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Category A</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Category B</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Category C</td>
                <td>15</td>
            </tr>
            <!-- You can add more rows as needed -->
        </tbody>
    </table>

    <canvas id="myChart" width="400" height="250"></canvas>

    <script>
        // JavaScript to generate the chart using Chart.js
        document.addEventListener('DOMContentLoaded', function() {
            var table = document.getElementById('data-table');
            var labels = [];
            var data = [];

            // Iterate through table rows and collect data
            for (var i = 1; i < table.rows.length; i++) {
                var row = table.rows[i];
                labels.push(row.cells[0].innerText); // Category name
                data.push(parseInt(row.cells[1].innerText)); // Data value, parse as integer
            }

            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Data Values',
                        data: data,
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        });
    </script>

</body>
</html>
